Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@contentful/f36-tooltip

Package Overview
Dependencies
Maintainers
0
Versions
347
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-tooltip

Forma 36: Tooltip component

  • 4.75.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
29K
decreased by-17.71%
Maintainers
0
Weekly downloads
 
Created
Source

title: 'Tooltip' type: 'component' status: 'stable' slug: /components/tooltip/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/tooltip' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-tooltip--basic' typescript: ./src/Tooltip.tsx

Tooltips are very useful to communicate extra information related to an element on the screen. The information should be contextual, useful, and nonessential.

Import

import { Tooltip } from '@contentful/f36-components';
// or
import { Tooltip } from '@contentful/f36-tooltip';

Examples

Button with tooltip

Tooltips in Text

Props (API reference)

Content guidelines

  • Use short and clear messages as the Tooltip’s content
  • The Tooltip component allows you to pass React elements as content. However, this should be used with care. ReactElement as content is best suited for text formatting purposes. It should not be used for interactive elements like links, buttons, or form elements. Additionally, extensive images should be avoided, except for text-decorator icons that give semantic meaning to the text shown in the tooltip (e.g., warning signs or other relevant icons).
    • When using ReactElement as the content, it's recommended to use the ScreenReaderOnly component when displaying critical information.

Accessibility

  • Do not put essential information in Tooltip component
  • Add unique id property to the tooltip, so appropriate a11y attributes could be used.
<Tooltip placement="top" id="tooltip" content="Hi I am a Tooltip">
  <TextLink>Hover me</TextLink>
</Tooltip>

FAQs

Package last updated on 16 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc